<template>
  <div class="chatsetting flex">
    <div class="menulist bg_fff mr-16 p-16">
      <div class="f-16 fw-6 c_text2 mb-16">设置项</div>
      <div class="mlist">
        <div
          v-for="(item, index) in menuList"
          :key="index"
          class="menuitem f-14 flex aligncenter commhover"
          :class="{ active: active == item.id }"
          @click="handleItem(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="pagemain bg_fff h_full">
      <page-one v-if="active == 1" />
      <page-two v-if="active == 2" />
      <page-three v-if="active == 3" />
      <page-four v-if="active == 4" />
      <page-five v-if="active == 5" />
    </div>
  </div>
</template>
<script>
import PageOne from "./PageOne.vue";
import PageTwo from "./PageTwo.vue";
import PageThree from "./PageThree.vue";
import PageFour from "./PageFour.vue";
import PageFive from "./PageFive.vue";

export default {
  data() {
    return {
      menuList: [
        { id: 1, name: "聊天显示" },
        { id: 2, name: "屏蔽对象" },
        { id: 3, name: "屏蔽关键词" },
        { id: 4, name: "侧边栏设置" },
        { id: 5, name: "通用设置" },
      ],
      active: 1,
    };
  },
  components: {
    PageOne,
    PageTwo,
    PageThree,
    PageFour,
    PageFive
  },
  methods: {
    handleItem(item) {
      this.active = item.id;
    },
  },
};
</script>
<style lang="scss" scoped>
.chatsetting {
  width: 1200px;
  margin: 20px auto;
  height: calc(100vh - 84px);
}
.menulist {
  width: 200px;
  box-shadow: 1px 0 0 0 #f0f0f0;
  border-radius: 4px;
}
.menuitem {
  position: relative;
  height: 32px;
  padding: 0 12px;
  margin-bottom: 5px;
  border-radius: 4px;
  &:hover {
    background-color: #fafafa;
  }
  &.active {
    background-color: #ebf2ff;
  }
}
.pagemain {
  width: 984px;
  border-radius: 4px;
  padding: 16px 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>